<!--
 * @Description: 文件描述
 * @Author: 陈三愿
 * @Date: 2025-09-15 00:17:17
 * @LastEditTime: 2025-09-15 00:17:19
-->
<template>
  <DynamicForm
    v-model="formData"
    :schema="formSchema"
    label-width="100px"
    @submit="onSubmit"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import DynamicForm from "../components/DynamicForm.vue";

const formData = ref({
  username: "",
  gender: "",
  hobbies: [],
  description: "只读内容",
});

const formSchema = [
  {
    label: "用户名",
    prop: "username",
    component: "Input",
    placeholder: "请输入用户名",
    rules: [
      { required: true, message: "用户名不能为空", trigger: "blur" },
      {
        pattern: /^[a-zA-Z0-9_-]{3,16}$/,
        message: "3-16位字母、数字、下划线或短横线",
        trigger: "blur",
      },
    ],
    style: { width: "300px" },
  },
  {
    label: "性别",
    prop: "gender",
    component: "Radio",
    options: [
      { label: "男", value: "male" },
      { label: "女", value: "female" },
    ],
    rules: [{ required: true, message: "请选择性别", trigger: "change" }],
  },
  {
    label: "爱好",
    prop: "hobbies",
    component: "Checkbox",
    options: [
      { label: "篮球", value: "basketball" },
      { label: "音乐", value: "music" },
      { label: "旅行", value: "travel" },
    ],
  },
  {
    label: "描述",
    prop: "description",
    component: "Text",
    style: { color: "gray" },
  },
];

const onSubmit = (values: any) => {
  console.log("提交的数据：", values);
};
</script>
